<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header">
    <!-- <div th:fragment="header">
         <meta charset="utf-8"/>
         <meta http-equiv="X-UA-Compatible" content="IE=edge"/>-->
    <!-- Tell the browser to be responsive to screen width -->
    <!--<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/common.css}"/>
    </div>-->
</head>
<link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/datapicker/datepicker3.css}" rel="stylesheet"/>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-dayUser-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">客户姓名：</label>
            <div class="col-sm-8">
                <input id="cardUserName" name="cardUserName" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">客户卡号：</label>
            <div class="col-sm-8">
                <input id="cardId" name="cardId" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">课程顾问：</label>
            <div class="col-sm-8">
                <input id="loginName" name="loginName" class="form-control" type="text">
            </div>
        </div>
       <!-- <div class="form-group">
            <label class="col-sm-3 control-label">邮箱：</label>
            <div class="col-sm-8">
                <input id="email" name="email" class="form-control" type="text">
            </div>
        </div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label">电话：</label>
            <div class="col-sm-8">
                <input id="phoneNumber" name="phoneNumber" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">性别：</label>
            <div class="col-sm-8">
                <select id="sex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">办卡类型：</label>
            <div class="col-sm-8">
                <input id="cardStyle" name="cardStyle" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">课时数量：</label>
            <div class="col-sm-8">
                <input id="classCount" name="classCount" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">课堂类型：</label>
            <div class="col-sm-8">
                <input id="classType" name="classType" class="form-control" type="text">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">到期时间：</label>
            <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input type="text" id="pastTime"  name="pastTime" class="form-control" value="2018-11-20">
                    </div>
                </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注信息：</label>
            <div class="col-sm-8">
                <input  id="remark" name="remark" class="form-control" type="text">
                </input>
            </div>
        </div>
    <!--    <div class="form-group">
            <label class="col-sm-3 control-label">上传头像：</label>
            <div class="col-sm-8">
                &lt;!&ndash;<input id="avatar" name="avatar" class="form-control" type="text">&ndash;&gt;
                &lt;!&ndash;<img th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : @{/profile/avatar/} + ${user.avatar}" alt="image" class="img-circle" height="60" width="60"/>&ndash;&gt;
            </div>
        </div>-->
        <!--class="layui-form-label"-->
        <div class="layui-upload">
            <label  class="col-sm-3 control-label">上传头像：</label>
            <div class="layui-upload-list">
                <!--预览图片-->
                <img class="layui-upload-img" style="width:50px;height:50px;"id="demo">
                <!--提示上传信息-->
                <p id="msg"></p>
            </div>
            <!--class="col-sm-8"-->
            <div class="layui-upload layui-input-block" >
                <input type="hidden" name="avatar" value="" required lay-verify="required"/>
                <button type="button" class="layui-btn layui-btn-primary" id="fileBtn"><i
                        class="layui-icon">&#xe67c;</i>选择文件
                </button>
                <button type="button" class="layui-btn layui-btn-warm" id="uploadBtn">开始上传</button>
            </div>
        </div>
    </form>
    <!--<form id="upload" enctype="multipart/form-data" method="post"><p style='color:red;text-align:left;'>
        注：<br/>1.照片的像素为160*180px。<br/>2.照片格式为BMP/JPG/JPEG。<br/>3.建议照片大小不超过40k。</p>
        <input type="file" name="file" id="uploadimage"/><br/>
        <input type="button" value="上传" id="btn" style="width:137px; height:27px"/>
    </form>-->
    <!--<div class="form-group">
    <button type="button" class="layui-btn" id="test1">
        <i class="layui-icon">&#xe67c;</i>上传图片
    </button>
    <input type="hidden" id="avatar" name="avatar" value="">-->
    <!--<div id="previewPhoto">
        &lt;!&ndash;<img src="/images/default-mem.png" th:src="${defaultImageViewPath+user.photo}" alt="" style="width: 80px;height: 80px;">&ndash;&gt;
        <img th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : @{/profile/avatar/} + ${user.avatar}" alt="image" class="img-circle" height="60" width="60"/>
    </div>-->

    <!--<div class="form-group">
        <label class="col-sm-3 control-label">删除标志（0代表存在 2代表删除：</label>
        <div class="col-sm-8">
            <input id="delFlag" name="delFlag" class="form-control" type="text">
        </div>
    </div>-->

    <!--div class="form-group">
        <label class="col-sm-3 control-label">操作时间：</label>
        <div class="col-sm-8">
            <input id="loginDate" name="loginDate" class="form-control" type="text">
        </div>
    </div>-->
    <div th:include="include::footer"></div>
    <script type="text/javascript">
        var prefix = ctx + "attend/dayUser"
        $("#form-dayUser-add").validate({
            rules: {
                phoneNumber:{
                    required:true,
                    isPhone:true,
                        },
                loginName: {
                    required: true,
                },
                cardId: {
                    required: true,
                },
                cardUserName: {
                    required: true,
                },
            }
        });

        function submitHandler() {
            if ($.validate.form()) {
                // $.operate.save(prefix + "/add", $('#form-dayUser-add').serialize());
                add();
            }
        }
        /*验证保存*/
        $("#form-user-add").validate({
            rules: {
                loginName: {
                    required: true,
                    minlength: 2,
                    maxlength: 20,
                    remote: {
                        url: ctx + "system/user/checkLoginNameUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                            name: function () {
                                return $.common.trim($("#loginName").val());
                            }
                        },
                        dataFilter: function (data, type) {
                            return $.validate.unique(data);
                        }
                    }
                },
                userName: {
                    required: true,
                },
                deptName: {
                    required: true,
                },
                password: {
                    required: true,
                    minlength: 5,
                    maxlength: 20
                },
                email: {
                    required: true,
                    email: true,
                    remote: {
                        url: ctx + "system/user/checkEmailUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                            name: function () {
                                return $.common.trim($("#email").val());
                            }
                        },
                        dataFilter: function (data, type) {
                            return $.validate.unique(data);
                        }
                    }
                },
                phonenumber: {
                    required: true,
                    isPhone: true,
                    remote: {
                        url: ctx + "system/user/checkPhoneUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                            name: function () {
                                return $.common.trim($("#phonenumber").val());
                            }
                        },
                        dataFilter: function (data, type) {
                            return $.validate.unique(data);
                        }
                    }
                },
            },
            messages: {
                "cardUserName": {
                    remote: "客戶已经存在"
                },
                "email": {
                    remote: "Email已经存在"
                },
                "phoneNumber": {
                    remote: "手机号码已经存在"
                }
            }
        });

        function add() {
            // var userId = $("input[name='userId']").val();
            var cardUserName = $("input[name='cardUserName']").val();
            var loginName = $("input[name='loginName']").val();
            var cardId = $("input[name='cardId']").val();
            var email = $("input[name='email']").val();
            var phoneNumber = $("input[name='phoneNumber']").val();
            var avatar = $("input[name='avatar']").val();
            var pastTime = $("input[name='pastTime']").val();
            var cardStyle = $("input[name='cardStyle']").val();
            var classType = $("input[name='classType']").val();
            var classCount = $("input[name='classCount']").val();
            var remark = $("input[name='remark']").val();
            var sex = $("#sex option:selected").val();
            $.ajax({
                cache: true,
                type: "POST",
                url: prefix + "/add",
                data: {
                    "cardUserName": cardUserName,
                    "loginName": loginName,
                    "phoneNumber": phoneNumber,
                    "email": email,
                    "sex": sex,
                    "cardId": cardId,
                    "cardStyle": cardStyle,
                    "classType": classType,
                    "avatar": avatar,
                    "pastTime": pastTime,
                    "classCount": classCount,
                    "remark": remark,
                },
                async: false,
                error: function (request) {
                    $.modal.alertError("系统错误");
                },
                success: function (data) {
                    $.operate.saveSuccess(data);
                }
            });
        }

        layui.use('upload', function () {
            var upload = layui.upload;
            upload.render({
                elem: '#fileBtn'
                , url: prefix + '/addPhoto'
                , accept: 'file'
                , auto: false
                , bindAction: '#uploadBtn'
                ,before: function (obj) {
                    //预览本地文件示例
                   obj.preview(function (index, file, result) {
                        $('#demo').attr('src', result);
                    });
                   // previewImg(obj);
                }
                , done: function (res) {
                    alert(res.msg);
                    $("[name=avatar]").val(res.avatar);
                }
            });
        });
        function previewImg(obj) {
            var img = new Image();
            img.src = obj.src;
            var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";
            //弹出层
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: [500 + 'px',550+'px'],
                shadeClose:true,
                scrollbar: false,
                title: "图片预览", //不显示标题
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                }
            });
        }
        /* layui.use('upload', function () {
             var $ = layui.jquery
                 , upload = layui.upload;
             //普通图片上传
             var uploadInst = upload.render({
                 elem: '#uploadImge'
                 , url: '/addPhoto/'
                 , before: function (obj) {
                     //预览本地文件示例
                     obj, preview(function (index, file, result) {
                         $('#demo').attr('src', result);
                     });
                 }
                 , done: function (res) {
                     //如果上传失败
                     if (res.code > 0) {
                         return layer.msg('上传失败');
                         //上传成功
                         layer.msg('上传成功');
                     }
                 }
             });
         });*/
        /*  $(document).ready(function () {
              $("#btn").click(function () {
                  if (confirm("确认上传？")) {
                      var imagePath = $("#uploadimage").val();
                      if (imagePath == "") {
                          alert("please upload image file", 2);
                          return false;
                      }
                      var strExtension = imagePath.substr(imagePath.lastIndexOf('.') + 1);
                      if (strExtension != 'jpg') {
                          if (strExtension != 'bmp') {
                              if (strExtension != 'png') {
                                  alert("please upload file that is a image", 2);
                                  return false;
                              }
                          }
                      }
                      $("#upload").ajaxSubmit({
                     // $.ajax({
                          type: 'POST',
                          url: 'uploadImage',
                          success: function (result) {
                              if (result.state == '0') {
                                  $("#imgDiv").empty();
                                  $("#imgDiv").html('<img src="' + result.data + '" style="width:137px;height:127px;"/>');
                                  $("#imgDiv").show();
                                  $("#uploadimage").val("");
                              } else {
                                  alert(result.msg + ":" + result.data);
                              }
                          },
                          error: function () {
                              alert("上传失败，请检查网络后重试,上传文件太大");
                          }
                      });
                  }
              })
          });*/
    </script>
    <script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
    <script th:src="@{/ajax/libs//datapicker/bootstrap-datepicker.js}"></script>
    <script> $(".input-group.date").datepicker({todayBtn: "linked",keyboardNavigation: !1,forceParse: !1,calendarWeeks: !0,autoclose: !0});
    $('.input-group.date').datepicker({
        minView: "month", //选择日期后，不会再跳转去选择时分秒
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        todayBtn: 1,
        autoclose: 1,
    });
    </script>
</div>
</body>
</html>
